
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('角色管理')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a>
              <cite>岗位管理</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="postName" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table" id="postTable" lay-filter="post_table_filter"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--状态-->
<script type="text/html" id="switchStatus">
    <input style="font-size: 12px" type="checkbox" name="status" value="{{d.postId}}" lay-skin="switch" lay-text="启用|暂停"
           lay-filter="statusChange" {{ d.status== 0 ? 'checked' : '' }}>
</script>

<script type="text/html" id="toolBarPost">
    <div class="layui-card-header">
        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除
        </button>
        <button id="btnAddPost" class="layui-btn" lay-event="addPost"><i class="layui-icon"></i>添加</button>
    </div>
</script>
<script type="text/html" id="barPost">
    <div>
        <a class="layui-btn layui-btn-xs layui-icon" lay-event="postEdit">&#xe642;编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-warm layui-icon" lay-event="postData">&#xe631;数据权限</a>
        <a class="layui-btn layui-btn-danger layui-icon" lay-event="postDel">&#x1006;删除</a>
    </div>
</script>
</body>
<th:block th:include="include :: dtree_js"/>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>

<script>
    layui.use(['laydate','form','table'], function(){
        var laydate = layui.laydate;
        var form = layui.form;
        var $=layui.jquery;
        var table=layui.table;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


        //表格数据加载
        var postTable=  table.render({
            elem: '#postTable',
            url: ctx + 'system/post/postList',
            method: 'post',
            page: {
                groups: 3,
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
            },
            toolbar: '#toolBarPost',
            defaultToolbar: ['filter', 'print'],
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'postId', title: '岗位ID'}
                    , {field: 'postCode', title: '岗位编码'}
                    , {field: 'postName', title: '岗位名称'}
                    , {field: 'postSort', title: '显示顺序'}
                    , {field: 'status', title: '岗位状态', templet: '#switchStatus',}
                    , {
                    field: 'createTime',
                    width: 200,
                    title: '创建时间',
                    sort: true,
                    templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'
                }
                    , {fixed: 'right', title:'操作',width: 350, align: 'center', toolbar: '#barPost'}
                ]
            ],
            parseData: function (res) {
                return {
                    "code": res.code,
                    "count": res.total,
                    "data": res.rows,
                }

            },
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            done: function (res, curr, count) {
                //设置表格样式

                $(".layui-table").css({
                    "border": "1px solid #e2e2e2",
                    "border-top": "none",
                    "width": "100%"
                });
                $("thead").css("border-top", "1px solid #e2e2e2");
            },
        });


        // 表格事件 监听
        table.on('tool(post_table_filter)',function (obj) {
            let _data=obj.data;
            switch (obj.event) {
                case 'postEdit':
                    editPost(_data);
                    break;
                case 'postData':
                    postData(_data);
                    break;
                case 'postDel':
                    postDel(_data);
                    break;
            };

        });

        // 编辑事件
        function editPost(_data) {

            layer.open({
                type: 2,
                area: ['600px', '540px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade: 0.4,
                title: '岗位编辑',
                content: ctx + "system/post/editPage?postId="+_data.postId,
            });
        };

        // 数据权限 按钮事件
        function postData(data) {

            layer.msg("postData被调用");
        };

        //删除事件
        function postDel(data) {

            layer.msg("postDel被调用"+JSON.stringify(data));
        };


        // 表格头按钮事件 监听
        table.on('toolbar(post_table_filter)',function (obj) {

            let _data=obj.data;
            switch (obj.event) {
                case 'addPost':
                    addPost(_data);
                    break;
                case 'delAll':
                    delAll(_data);
                    break;
            };
        });


        // 新增事件
        function addPost(data) {
            layer.open({
                type: 2,
                area: ['600px', '540px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade: 0.4,
                title: '岗位新增',
                content: ctx + "system/post/addPage",
            });
        };




        //批量删除事件
        function delAll(data) {

            layer.msg("delAll被调用");
        }


        //监听状态修改事件
        form.on('switch(statusChange)', function(obj){
            // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            $.ajax({
                url:ctx +'system/post/status',
                type:'POST',
                data:{
                    postId:this.value,
                    status: obj.elem.checked
                },
                success:function (res) {
                    layer.msg(res.msg)
                }
            })
        });


    });
</script>
</html>